<template>
  <div class="app">
    <!-- 背景特效容器 -->
    <div class="background-effects"></div>
    
    <!-- 统一页面头部 -->
    <Header />
    
    <!-- 路由视图 -->
    <main class="main-content">
      <router-view />
    </main>
    <FloatContact />
    <!-- 统一页面底部 -->
    <Footer />
    
    <!-- 回到顶部组件 -->
    <BackToTop />
  </div>
</template>

<script setup lang="ts">
// App.vue 现在作为路由容器
import Header from './Header.vue'
import Footer from './Footer.vue'
import BackToTop from './BackToTop.vue'
import FloatContact from './FloatContact.vue'
import { useRouter } from 'vue-router'
import { ref, watch } from 'vue'

const router = useRouter()
const currentRoute = ref(router.currentRoute.value.path)

// 监听路由变化
watch(() => router.currentRoute.value, (route) => {
  currentRoute.value = route.path
}, { immediate: true })
</script>

<style>
#app {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  /* 移除padding-top，因为Header组件已经使用了position: fixed */
  position: relative;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.background-effects {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.background-effects::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(100, 108, 255, 0.05) 0%, transparent 70%);
  animation: rotate 15s linear infinite;
}

.background-effects::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent 40%, rgba(100, 108, 255, 0.03) 50%, transparent 60%);
  background-size: 200% 200%;
  animation: gradient 8s ease infinite;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #f8f8f8;
  font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

.main-content {
  flex: 1 0 auto;
  position: relative;
  z-index: 1;
  padding: 20px;
}

/* 为深色模式做准备 */
body.dark-mode #app {
  background-color: #222;
}

body.dark-mode .background-effects::before {
  background: radial-gradient(circle, rgba(100, 108, 255, 0.08) 0%, transparent 70%);
}

body.dark-mode .background-effects::after {
  background: linear-gradient(45deg, transparent 40%, rgba(100, 108, 255, 0.06) 50%, transparent 60%);
}

/* 路由视图动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 确保路由视图内容可见 */
.router-view {
  position: relative;
  z-index: 1;
}

/* 确保视图容器占据足够空间 */
#app > .main-content {
  width: 100%;
  min-height: calc(100vh - 60px - 300px); /* 减去头部和底部的高度 */
}

/* 动画关键帧 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>